<script lang="ts" setup>
import { vElementSize } from '@vueuse/components';
import { useAppStore } from '~/stores';

const targetH = ref(0);
const inviteLiveRewardQry = useQuery({
  queryKey: [apis.apiInviteLiveRewards.id],
  queryFn: () => apis.apiInviteLiveRewards(undefined),
});
const appStore = useAppStore();
const inviteLiveRewardData = computed(() => inviteLiveRewardQry.data.value);
const rewardList = computed(() => inviteLiveRewardData.value?.rewards_list);
const slidesToShow = computed(() => {
  const length = inviteLiveRewardData.value?.rewards_list && inviteLiveRewardData.value?.rewards_list?.length;
  return length && length >= 4 ? 4 : length;
});

const bodyH = computed(() => {
  if (targetH.value)
    return targetH.value * (slidesToShow?.value ?? 0);

  return 30 * 3;
});
function openProfile(uid: string) {
  globalPopups.userProfile.open({ userId: uid });
}
function onResize({ width, height }: { width: number; height: number }) {
  targetH.value = height + 10;
  return {
    width,
    height,
  };
}
</script>

<template>
  <TCard :title="$t('llKhpJf6C3ATxP7PFmY')">
    <div class="reward-box">
      <p class="text-3.5 leading-5">
        {{ $t('chAj5ukMw4kld5Srv26Ga') }}
      </p>
      <p class="text-6 font-black leading-8">
        <TAmount class="mr-2 text-white" :value="inviteLiveRewardData?.total_rewards" :decimals="2" symbol="$" format="fixed-dec" colored="inherit" iconPos="left" />
      </p>
    </div>

    <div class="reward-list">
      <swiper-container
        direction="vertical"
        :slidesPerView="slidesToShow"
        :spaceBetween="10"
        :loop="true"
        :autoplay="{ delay: 1000 }"
        :allowTouchMove="false"
        :draggable="false"
        :speed="1000"
        :style="`height:${bodyH + 30}px`"
      >
        <swiper-slide v-for="(item, index) in rewardList" :key="index" class="!flex !items-center !justify-between">
          <div v-element-size="onResize" class="flex flex-1 items-center" @click="openProfile(item?.uid)">
            <div class="relative mr-[6px]">
              <img :src="appStore.getCdnResPath('avatar', item.avatar)" class="w-5.5 rounded-[50%]">
              <div class="absolute left-50% top-4 h-3.5 w-5 flex translate-x--50% scale-80 items-center justify-center rounded-2 bg-brand500 text-2.5 text-sys-text-head">
                {{ item.level }}
              </div>
            </div>

            <span class="mx-[6px] text-sys-text-head font-semibold">{{ item.name }}</span>
            <span class="text-sys-text-body">
              <template v-if="$bp.desktop1k || ($bp.mobilel && $bp.ltDesktop)">{{ $t('83VgjPtf1gZlOgA7Zv0p6') }}</template>
              <template v-else><i class="i-material-symbols:arrow-forward-ios-rounded" /></template>

            </span>
          </div>
          <div class="flex items-center text-3.5">
            <TAmount :value="item.amount" :decimals="2" symbol="$" format="fixed-dec" colored="full" iconPos="left" />
          </div>
        </swiper-slide>
      </swiper-container>
    </div>

    <div class="divider-h-gradual" />

    <div class="mb-2.5 leading-normal">
      {{ $t('diUIbJkvWasrA129ajeIq') }}
    </div>
    <div class="medal-box">
      <div v-for="(item, index) in inviteLiveRewardData?.leaderboard" :key="index" class="medal-item">
        <div class="silver" :class="`reward-rank${index}`">
          <img
            :src="appStore.getCdnResPath('avatar', item.avatar)"
            class="img-center"
          >
        </div>
        <p>{{ item.name }}</p>
      </div>
    </div>
  </TCard>
</template>

<style lang="scss" scoped>
.reward-box {
  --uno: 'rounded-2 px4 py-3.5 my-2 grid gap1 items-center justify-between';

  background: url('~/assets/imgs/user/reward-bg.png') no-repeat 100% / cover;
}

.reward-list {
  --uno: ' pb-2.5 overflow-hidden ';

  :deep(.slick-list) {
    --uno: 'max-h-40 h-auto!';
  }
}

.medal-box {
  --uno: 'py-3 px-2.5 flex items-end justify-center gap-3.5 bg-sys-layer-d rounded-2';

  .medal-item {
    --uno: 'text-center';

    > p {
      --uno: 'text-3.5 text-sys-text-body leading-normal';
    }
  }

  .reward-rank0 {
    --uno: 'relative mb-6px w-64px h-45px mx-auto';

    background: url('~/assets/icons/silver-medal.svg') no-repeat 100% / contain;

    img {
      --uno: 'h-9 w-9';
    }
  }

  .reward-rank1 {
    --uno: 'relative w-19 h-14 mx-auto';

    background: url('~/assets/icons/gold-medal.svg') no-repeat 100% / contain;

    img {
      --uno: 'h-10.5 w-10.5';
    }
  }

  .reward-rank2 {
    --uno: 'relative mb-6px w-64px h-45px mx-auto';

    background: url('~/assets/icons/bronze-medal.svg') no-repeat 100% / contain;

    img {
      --uno: ' h-9 w-9';
    }
  }
}

.img-center {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
</style>
